<template>
  <div class="about">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <h2>
              <img
                class="title"
                :src="res.meirihaodian.title.pic"
                :alt="res.meirihaodian.title.h2"
              />
              <small>{{ res.meirihaodian.title.small }}</small>
            </h2>
            <el-row :gutter="10">
              <el-col
                :span="12"
                v-for="(item, index) in res.meirihaodian.pics"
                :key="index"
              >
                <h3>{{ item.title }}</h3>
                <el-row :gutter="2">
                  <el-col :span="16">
                    <a href="">
                      <img class="pic" :src="item.imgs[0].src" alt="" />
                    </a>
                  </el-col>
                  <el-col :span="8">
                    <a href="" class="mb-2">
                      <img class="pic2" :src="item.imgs[1].src" alt="" />
                    </a>
                    <a href="">
                      <img class="pic2" :src="item.imgs[2].src" alt="" />
                    </a>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <h2>
              <img
                class="title"
                :src="res.taobaozhibo.title.pic"
                :alt="res.taobaozhibo.title.h2"
              />
              <small>{{ res.taobaozhibo.title.small }}</small>
            </h2>
            <el-row :gutter="10">
              <el-col
                :span="12"
                v-for="(item, index) in res.taobaozhibo.pics"
                :key="index"
              >
                <h3>
                  {{ item.title }} <small>{{ item.see }}</small>
                </h3>
                <el-row :gutter="2">
                  <el-col :span="16">
                    <a href="">
                      <img class="pic" :src="item.imgs[0].src" alt="" />
                    </a>
                  </el-col>
                  <el-col :span="8">
                    <a href="" class="mb-2">
                      <img class="pic2" :src="item.imgs[1].src" alt="" />
                    </a>
                    <a href="">
                      <img class="pic2" :src="item.imgs[2].src" alt="" />
                    </a>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
let dataSource = {
  meirihaodian: {
    title: {
      pic: require("../assets/about/title1.png"),
      h2: "每日好店",
      small: "发现深藏的好店",
    },
    pics: [
      {
        title: "万能集市",
        imgs: [
          {
            link: "",
            src: require("../assets/about/img.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img2.jpg"),
          },
        ],
      },
      {
        title: "淘宝江湖",
        imgs: [
          {
            link: "",
            src: require("../assets/about/img3.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img4.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img5.jpg"),
          },
        ],
      },
      {
        title: "深藏不露",
        imgs: [
          {
            link: "",
            src: require("../assets/about/img6.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img7.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img8.jpg"),
          },
        ],
      },
      {
        title: "高手林立",
        imgs: [
          {
            link: "",
            src: require("../assets/about/img9.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img10.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img11.jpg"),
          },
        ],
      },
    ],
  },
  taobaozhibo: {
    title: {
      pic: require("../assets/about/title2.png"),
      h2: "淘宝直播",
      small: "你的爱豆直播等你哟！",
    },
    pics: [
      {
        title: "aj1黑脚趾",
        see: "10382观看",
        imgs: [
          {
            link: "",
            src: require("../assets/about/img12.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img13.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img14.jpg"),
          },
        ],
      },
      {
        title: "青青河边草真皮",
        see: "8965观看",
        imgs: [
          {
            link: "",
            src: require("../assets/about/img15.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img16.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img17.jpg"),
          },
        ],
      },
      {
        title: "涵木家",
        see: "4412观看",
        imgs: [
          {
            link: "",
            src: require("../assets/about/img18.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img19.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img20.jpg"),
          },
        ],
      },
      {
        title: "厂家优品",
        see: "5771观看",
        imgs: [
          {
            link: "",
            src: require("../assets/about/img21.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img22.jpg"),
          },
          {
            link: "",
            src: require("../assets/about/img23.jpg"),
          },
        ],
      },
    ],
  },
};
export default {
  data() {
    return {
      res: dataSource,
    };
  },
};
</script>

<style>
.el-container {
  width: 1200px;
  margin: auto;
}

h3 {
  font-size: 16px;
  font-weight: 300;
}

small {
  font-size: 12px;
  color: #999;
  font-weight: 300;
  margin-left: 10px;
}

a {
  display: block;
  text-decoration: none;
  color: #000;
}
a:hover {
  color: red;
}

.kuan {
  background: #fff;
  /* margin: 5px; */
}

h3 a {
  display: inline;
}

img {
  display: block;
  width: 100%;
}

.mb-2 {
  margin-bottom: 2px;
}

.title {
  height: 24px;
  display: inline-block;
  width: auto;
}

h2 small {
  position: relative;
  top: -8px;
}
</style>
